<template>
  <div class="card-header">
    <div class="select">
      <el-dropdown
          trigger="click"
          @command="$store.commit('file/setSortMethod', $event)"
      >
        <span class="el-dropdown-link">
          {{ `按${sortName}排序` }}<i class="el-icon-arrow-down el-icon--right" />
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <div
                v-for="item in sortMethods"
                :key="item.key"
            >
              <el-dropdown-item
                  v-if="item.key === sortKey"
                  icon="el-icon-check"
                  :command="item.key"
              >
                {{ item.name }}
              </el-dropdown-item>
              <el-dropdown-item
                  v-else
                  :command="item.key"
                  icon="el-icon-check"
                  class="hidden-icon"
              >
                {{ item.name }}
              </el-dropdown-item>
            </div>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    &nbsp; &nbsp;
    <div class="ascend">
      <el-switch
          :model-value="sortAscend"
          active-text="升序"
          inactive-text="降序"
          @change="$store.commit('file/setSortAscend', $event)"
      />
    </div>
    <div class="blank" />
    <div class="operation-button">
        <div>
          <el-input
              v-model="searchKeyword"
              clearable
              @keyup.enter="searchFile"
          />
        </div>
      &nbsp; &nbsp;
      <el-button
          icon="el-icon-search"
          circle
          @click="searchFile"
      />
      <el-popover
          placement="bottom"
          trigger="focus"
      >
        <template #reference>
          <el-button
              type="primary"
              icon="el-icon-plus"
              circle
          />
        </template>
        <el-space
            direction="vertical"
            class="operations"
        >
          <el-link
              :underline="false"
              href="javascript:void(0);"
              icon="el-icon-document-copy"
              @click="$bus.emit('copy-file')"
          >
            复制
          </el-link>
          <el-link
              :underline="false"
              href="javascript:void(0);"
              icon="el-icon-scissors"
              @click="$bus.emit('cut-file')"
          >
            剪切
          </el-link>
          <el-link
              :underline="false"
              href="javascript:void(0);"
              icon="el-icon-document-add"
              @click="$bus.emit('parse-file')"
          >
            粘贴
          </el-link>
          <el-link
              :underline="false"
              href="javascript:void(0);"
              icon="el-icon-delete"
              @click="$bus.emit('delete-file')"
          >
            删除
          </el-link>
        </el-space>
      </el-popover>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'

export default {
    name: 'FileListHeader',
    data() {
        return {
            showSearch: false,
            searchKeyword: '',
            sortMethods: [
                {
                    name: '文件名称',
                    key: 'filename'
                },
                {
                    name: '文件大小',
                    key: 'filesize'
                },
                {
                    name: '修改时间',
                    key: 'time'
                }
            ]
        }
    },
    computed: {
        ...mapState({
            sortKey: (state) => state.file.sortKey,
            sortAscend: (state) => state.file.sortAscend,
        }),
        sortName() {
            return this.sortMethods.find((it) => it.key === this.sortKey).name
        }
    },
    methods: {
        searchFile() {
            this.$store.commit('setSearchPath', this.$route.params.filePaths)
            this.$store.commit('setSearchKey', this.searchKeyword)
            this.$bus.emit('file-search')
        }
    }
}
</script>

<style scoped lang="less">
.card-header {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;

  .select, .ascend {
    display: flex;
    align-items: center;
  }
}

.operations {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.operation-button {
  display: flex;
  flex-direction: row;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}

</style>

<style>
.hidden-icon > i {
    color: #00000000
}
</style>